<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>order管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }
        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }

    </style>
</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <h1>管理<small>order管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
            <el-breadcrumb-item>order管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div style="margin-bottom: 20px">
            <el-button class="dalfBut" type="primary" icon="el-icon-arrow-left" @click="goprea()">返回</el-button>
        </div>
        <div class="box">
            <el-table :data="tableData"
                      border style="width: 100%">
                <el-table-column prop="id" label="订单编号" width="200"></el-table-column>
                <el-table-column prop="receiverContact" label="收货人" width="160"></el-table-column>
                <el-table-column prop="receiverMobile" label="手机号码" width="180"></el-table-column>
<!--                <el-table-column prop="receiverAddress" label="邮政编码" width="160"></el-table-column>-->
                <el-table-column prop="receiverAddress" label="收货地址" width="250"></el-table-column>
                <el-table-column prop="shippingName" label="配送方式" width="160">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.shippingName" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="shippingCode" label="物流单号" width="160">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.shippingCode" placeholder="订单编号" class="filter-item" ></el-input>
                    </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                        label="操作">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-button @click="goOrderItem(scope.row.id)" size="mini" type="primary" size="small">查看订单</el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->
            </el-table>
        </div>
        <el-button class="dalfBut" type="primary" @click="batchSend()">确定</el-button>
    </div>
</div>


</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                tableData: [],
                currentPage: 1,
                total: 10,
                size: 10,
                searchMap: {},
                pojo: {},
                formVisible: false,
                imageUrl: '',
                ids:[],
                consignStatus:'0',
                options:[
                    {
                        value: '申通',
                        label: '申通'
                    },
                    {
                        value: '圆通',
                        label: '圆通'
                    },
                    {
                        value: '顺丰',
                        label: '顺丰'
                    },
                    {
                        value: '邮政',
                        label: '邮政'
                    }]
            }
        },
        created(){
            //this.searchMap.consignStatus = this.consignStatus;
            this.searchMap.ids = getQueryString("ids").split(',');
            console.log("searchMap"+this.searchMap.ids);
            this.fetchData();
        },
        methods:{
            fetchData (){
                axios.post(`/order/findAllList.do`,this.searchMap.ids).then(response => {
                    this.tableData = response.data;
                    console.log(this.tableData);
                });
            },
            open() {
                this.$alert('批量操作成功', '成功', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${ action }`
                        });
                    }
                });
            },
            batchSend(){
                axios.post(`/order/batchSend.do`,this.tableData).then(response => {
                    console.log("yes");
                    this.open();
                });
            },
            goprea(){
                location.href = "order.html";
            }
        }
    })
</script>
</html>
